//加载公共样式
require('../../assets/css/public.less')
//加载自己的样式
require('./play.less');
//获取axios工具函数
const request = require('../../lib/request/request.js')
//引入字体图标
require('../../assets/public/fonts/iconfont.css')
// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

window.onload = () => {
    function $(selector) {
        return document.querySelector(selector)
    }
    // 获取本地数据
    let fragments = JSON.parse(localStorage.getItem('fragments'))
    console.log(fragments);
    // $('.video').src = API + fragments[0].videoUrl

    // 初始化播放索引
    let index = 0
    // 播放视频总数
    let length = fragments.length
    // 定义一个变量,储存每次的时间
    let timeList = []
    // 记录当前时间
    let time = 0

    // 播放函数
    function play() {
        $('.video').src = API + fragments[index].videoUrl

        //信息赋值 
        $('.num').textContent = index + 1
        $('.total').textContent = length
        $('.desTxt').textContent = fragments[index].title
        $('.nowData').textContent = fragments[index].title
        $('.currImg').src = API + fragments[index].imgUrl

        // 监听播放器能播放的时候在播放
        $('.video').addEventListener('canplay', () => {
            // 播放
            $('.video').play()
        })

    }
    // 初始化播放
    play()

    // 下一曲
    $('.nexBtn').addEventListener('click', function () {

        // 判断
        if (index < length - 1) {
            // 索引+1
            index++
            // 播放下一个视频
            play()
            // 把上次记录的时间存入数组
            timeList.push(time)
        } else {
            index = 0
            play()
        }

    })

    // 上一曲
    $('.preBtn').addEventListener('click', function () {

        // 判断
        if (index > 0) {
            // 索引+1
            index--
            // 播放下一个视频
            play()

            // 把上次记录的时间存入数组
            timeList.push(time)
        }

    })

    //暂停
    $('.pauseBtn').addEventListener('click', function () {
        // 切换图标
        $('.pauseBtn').classList.add('dpnone')
        $('.playBtn2').classList.remove('dpnone')

        // 出现遮罩
        $('.popup').style.display = 'block'
        //暂停
        $('.video').pause()

    })

    //播放
    $('.playBtn2').addEventListener('click', function () {
        //播放
        $('.video').play()
        // 切换图标
        $('.pauseBtn').classList.remove('dpnone')
        $('.playBtn2').classList.add('dpnone')

    })

    // 进度条
    $('.video').addEventListener('timeupdate', () => {
        // 获取当前时间 百分比
        const percent = $('.video').currentTime / $('.video').duration

        // 计算进度条的长度
        $('.progress').style.width = percent * 100 + '%'

        // 把当前时间记录到time里面
        time = $('.video').currentTime
    })


    // 点击继续训练关闭遮罩并开始视频
    $('.continue1').addEventListener('click', () => {
        console.log(2);
        $('.popup').style.display = 'none'
        //开始视频
        $('.playBtn2').click()

    })

    // 点击结束训练跳转页面
    $('.end').addEventListener('click', () => {
        // 把运动数据发送器请求 保存到数据库
        // 把上次记录的时间存入数组
        timeList.push($('.video').currentTime)
        // console.log(timeList);

        // 得到数组的总和
        let res = timeList.reduce((total, cur) => {
            return total + cur
        }, 0)
        console.log(res);

        // 发送请求传入数据
        request.post('/api/exercise/save', {
            type: 2,
            duration: res,
            calorie: res * 1000
        }).then(res => {
            if (res.data.errno === 0) {
                location.href = './cuorse.html'
            }
        })



    })

    // 点击继续训练关闭蒙层
    $('.continue1').addEventListener('click', () => {
        // 关闭遮罩
        $('.popup').style.display = 'none'
    })
    // 点击结束训练跳转页面
    $('.end').addEventListener('click', () => {
        location.href = './cuorse.html'
    })




}
